$icons: "add-filled", "add", "altname", "bell-filled", "bell", "bookmark-filled",
  "bookmark", "cancel", "checkmark", "chevron", "critical", "deprecated",
  "desktop", "disabled", "edit", "ellipses", "experimental", "external",
  "eye-filled", "eye", "firefox", "footnote", "github-mark-small", "information",
  "language", "menu-filled", "menu", "mobile", "theme-dark", "next", "no",
  "nonstandard", "note-info", "note-warning", "note-deprecated", "padlock",
  "partial", "prefix", "preview", "previous", "quote", "search", "server",
  "sidebar", "small-arrow", "theme-light", "star-filled", "star",
  "theme-os-default", "thumbs-down", "thumbs-up", "trash", "twitter", "unknown",
  "warning", "yes", "yes-circle";

.icon {
  --size: var(--icon-size, 1rem);
  background-color: var(--icon-primary);
  display: inline-block;
  height: var(--size);
  width: var(--size);
  vertical-align: middle;
  mask-position: center;
  mask-repeat: no-repeat;
  flex-shrink: 0;
}

// The icon class is applied directly to SVGs sometimes. This
// override un-breaks those.
svg.icon {
  background: transparent;
  color: var(--icon-primary);
}

.icon {
  @each $name in $icons {
    &.icon-#{$name} {
      mask-image: url("../../../assets/icons/" + $name + ".svg");
    }
  }
}
